import React, { useMemo, useState } from 'react'
import { Modal, Tab } from '@kedacom/react-next'
import { ModalWrap, LabelWrap, StyledSpan } from './style'
import { IVirtualRoomItem } from '@/api/sysConfig/virtualRoomConfig/interface'
import { useGlobalStore } from '@/store/global'
import { getBiterateText, getSfuBiterateText, transVirtualRoomDetail } from '../translator'
import { t } from 'i18next'
import shallow from 'zustand/shallow'

interface DetailModalProps {
	isShow: boolean
	setIsShow: (flag: boolean) => void
	orgData: IVirtualRoomItem | null
	handleEdit: (id: string, inUse: boolean) => void
}

export default function DetailModal(props: DetailModalProps) {
	const { isShow, setIsShow, orgData, handleEdit } = props
	const { serverInfo, user } = useGlobalStore(
		(state) => ({ serverInfo: state.serverInfo, user: state.user }),
		shallow
	)
	const [currentTab, setCurrentTab] = useState(1)
	const isRTCMeeting = orgData?.conf_type === 2
	const data = useMemo(() => transVirtualRoomDetail(orgData, serverInfo?.integrated), [orgData])

	const tabData = [
		{
			label: t('基本信息'),
			value: 1,
		},
		{
			label: t('会议参数'),
			value: 2,
		},
		{
			label: t('专属信息'),
			value: 3,
		},
		{
			label: t('可见性设置'),
			value: 4,
		},
	]

	const handleCancel = () => {
		setIsShow(false)
		setCurrentTab(1)
	}

	const modifyMt = () => {
		orgData && handleEdit(orgData?.vmr_moid, orgData?.status === 1)
		handleCancel()
	}

	return (
		<Modal
			open={isShow}
			title={t('虚拟会议室详情')}
			okText={t('修改')}
			width={550}
			height={515}
			onCancel={handleCancel}
			onOk={modifyMt}
			cancelText={t('取消')}
		>
			<ModalWrap>
				<Tab
					type="button"
					data={tabData}
					value={currentTab}
					onChange={(e, val) => {
						setCurrentTab(val)
					}}
				></Tab>
				<div className="modal_cont">
					{currentTab === 1 && (
						<div className="basic_info">
							<LabelWrap>
								<label>{t('会议室名称')}</label>
								<span>{data.name}</span>
							</LabelWrap>
							<LabelWrap>
								<label>{t('会议规模')}</label>
								<span>{data.mtType}</span>
							</LabelWrap>
							<LabelWrap>
								<label>{t('虚拟会议室号码')}</label>
								<span>{data.vmrE164}</span>
							</LabelWrap>
						</div>
					)}
					{currentTab === 2 && (
						<div className="mt_params">
							<LabelWrap>
								<label>{t('会议类型')}</label>
								<span>{data.meetingType}</span>
							</LabelWrap>
							{!isRTCMeeting && (
								<LabelWrap>
									<label>{t('会议优选协议')}</label>
									<span>{data.meetingProtocol}</span>
								</LabelWrap>
							)}
							<LabelWrap>
								<label>{t('媒体能力')}</label>
								<div>
									{data.isH265}
									{isRTCMeeting && (
										<div style={{ paddingTop: 10 }}>
											{orgData && getSfuBiterateText(orgData.video_formats[0])}
										</div>
									)}
								</div>
								{/* {!isRTCMeeting && isH265 && <span>H.265</span>}
								{!isRTCMeeting && !isH265 && <span>H.264及其它</span>} */}
							</LabelWrap>
							{!isRTCMeeting && (
								<LabelWrap>
									<label>{t('会议码率')}</label>
									<span>{orgData && getBiterateText(orgData.video_formats[0])}</span>
								</LabelWrap>
							)}
							{!isRTCMeeting && (
								<LabelWrap>
									<label>{t('级联会议')}</label>
									<div className="detail">
										{data.simpleCascade}
										{data.simpleCascade === t('合并级联') && (
											<div>
												<span>{data.cascadeUpload}</span>
												<StyledSpan>{data.cascadeReturn}</StyledSpan>
												{data.cascadeReturn === t('开启回传') && (
													<>
														<StyledSpan>{data.cascadeReturnPara}M</StyledSpan>
														<StyledSpan>{data.multiStream}</StyledSpan>
													</>
												)}
											</div>
										)}
									</div>
								</LabelWrap>
							)}
							<LabelWrap>
								<label>{t('初始哑音')}</label>
								<span>{data.initMute}</span>
							</LabelWrap>
							<LabelWrap>
								<label>{t('全场哑音例外')}</label>
								<span>{data.muteException}</span>
							</LabelWrap>
							{!isRTCMeeting && (
								<LabelWrap>
									<label>{t('自动画面合成')}</label>
									<div className="detail">
										{data.autoImageComposition}
										{orgData?.conf_type === 1 && (
											<div>
												<label>{t('N-1模式')}</label>
												<span>{data.nMinusOneMode}</span>
											</div>
										)}
									</div>
								</LabelWrap>
							)}
							<LabelWrap>
								<label>{t('智能混音')}</label>
								<span>{data.intelligentRemix}</span>
							</LabelWrap>
							{!isRTCMeeting &&
								!!user?.enable_vrs &&
								!!user.enable_video &&
								orgData?.encrypted_type !== 4 && (
									<LabelWrap>
										<label>{t('会议录像')}</label>
										<span>{data.enableVideo}</span>
									</LabelWrap>
								)}
							{!isRTCMeeting &&
								!!user?.enable_vrs &&
								!!user.enable_video &&
								orgData?.encrypted_type !== 4 && (
									<LabelWrap>
										<label>{t('会议直播')}</label>
										<span>{data.enableLive}</span>
									</LabelWrap>
								)}
							<LabelWrap>
								<label>{t('视频会议水印')}</label>
								<span>{data.watermark}</span>
							</LabelWrap>
							{orgData?.conf_type === 0 && (
								<LabelWrap>
									<label>{t('资源预占')}</label>
									<span>{data.sourceUsed}</span>
								</LabelWrap>
							)}
							<LabelWrap>
								<label>{t('数据加密')}</label>
								<div>
									<div>{data.encryptionType}</div>
								</div>
								{orgData?.encrypted_type === 4 && (
									<span>{t('只允许硬件终端加入国密会议(使用SM1算法)')}</span>
								)}
								{orgData?.encrypted_auth === 1 && <span>{t('启用终端强认证')}</span>}
								{orgData?.quantum_encryption ? <span>{t('量通加密')}</span> : <></>}
							</LabelWrap>
							<LabelWrap>
								<label>{t('内容共享')}</label>
								<span>{data.doubleFlowLimit}</span>
							</LabelWrap>
							{!isRTCMeeting && !!user?.enable_dcs && (
								<LabelWrap>
									<label>{t('数据协作')}</label>
									<span>{data.enableDCS}</span>
									<span>{data.dcsMode}</span>
								</LabelWrap>
							)}
							{!isRTCMeeting && (
								<>
									<LabelWrap>
										<label>{t('视频质量设置')}</label>
										<span>{data.videoQuality}</span>
									</LabelWrap>
									<LabelWrap>
										<label>{t('呼叫方式')}</label>
										<div>
											<div className="detail">
												{data.callMode}
												{orgData?.call_mode ? (
													<>
														<div>
															<label>{t('呼叫间隔')}</label>
															<span>{data.callInterval}</span>
														</div>
														<div>
															<label>{t('呼叫次数')}</label>
															<span>{data.callTimes}</span>
														</div>
													</>
												) : (
													<></>
												)}
											</div>
										</div>
									</LabelWrap>
									<LabelWrap>
										<label>{t('语音激励')}</label>
										<span>{data.voiceInspireEnable}</span>
									</LabelWrap>
								</>
							)}
							<LabelWrap>
								<label>{t('来宾会议室')}</label>
								<span>{data.publicMeeting}</span>
							</LabelWrap>
							{!isRTCMeeting && (
								<>
									<LabelWrap>
										<label>{t('归一重整')}</label>
										<span>{data.oneReforming}</span>
									</LabelWrap>
									<LabelWrap>
										<label>FEC</label>
										<span>{data.fecMode}</span>
									</LabelWrap>
								</>
							)}
						</div>
					)}
					{currentTab === 3 && (
						<div className="exclusive_info">
							<LabelWrap>
								<label>{t('专属会议室')}</label>
								<span>{data.exclusive}</span>
							</LabelWrap>
							{orgData?.exclusive === 1 && (
								<LabelWrap>
									<label>{t('专属人员')}</label>
									<div>
										{data.exclusiveUser.map((item) => {
											return (
												<div key={item.account} className="detail">
													{item.name}
												</div>
											)
										})}
									</div>
								</LabelWrap>
							)}
						</div>
					)}
					{currentTab === 4 && (
						<div className="visible_info">
							<LabelWrap>
								<label>{t('会议可见性')}</label>
								<span>{data.visible}</span>
							</LabelWrap>
							{orgData?.visible === 1 && (
								<LabelWrap>
									<label>{t('会议可见用户域')}</label>
									<div>
										{data.visibleUserDomains.map((item) => {
											return (
												<div key={item.moid} className="detail">
													{item.name}
												</div>
											)
										})}
									</div>
								</LabelWrap>
							)}
						</div>
					)}
				</div>
			</ModalWrap>
		</Modal>
	)
}
